<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { useCartStore } from '@/stores'
import { ref, watch } from 'vue'

const props = defineProps(['item', 'isMin', 'shopId'])
const cart = useCartStore()
// console.log(cart)
//获取当前商品再的采购量
// const count = computed(
//   () => {
//     const number = cart.cartList.get(props.shopId)?.get(String(props.item.id))?.number
//     return number || 0
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// )
const count = ref(0)
watch(
  () => cart.cartList,
  () => {
    // console.log('检测到购物车列表变化')
    // console.log(props.item.id)
    // console.log(cart.cartList.get(props.shopId).get(String(props.item.id)))
    // const number = cart.cartList.get(props.shopId)?.get(String(props.item.id))?.number
    // console.log(number)
    count.value = cart.cartList.get(props.shopId)?.get(String(props.item.id))?.number || 0
  },
  {
    deep: true,
    immediate: true
  }
)

const list = props.item
const updateCount = (num) => {
  console.log(num, props.shopId)
  const goodId = String(props.item.id)
  if (count.value + num >= 0) {
    const res = cart.updateCartList(props.shopId, goodId, num)
    if (!res) {
      cart.setCartList(props.shopId, goodId, props.item)
      cart.updateCartList(props.shopId, goodId, num)
    }
  }
  console.log('============')
  console.log(cart.cartList)
}
</script>
<template>
  <div class="Product">
    <div class="Product-img">
      <img
        :class="{ isMin: props.isMin }"
        :src="`http://www.dell-lee.com/imgs/vue3/${list.imgName}.png`"
        alt=""
      />
    </div>
    <div class="Product-info">
      <div class="Product-info-detail">
        <div class="Product-title">{{ list.title }}</div>
        <div class="Product-price">
          <span class="Product-price-now">￥{{ list.price }}</span>
          <span class="Product-price-old">￥{{ list.oldPrice }}</span>
        </div>
      </div>
      <div class="Product-btn">
        <div class="Product-btn-decrease" @click="updateCount(-1)">-</div>
        <div class="Product-btn-count">&nbsp;{{ count }}&nbsp;</div>
        <div class="Product-btn-increase" @click="updateCount(1)">+</div>
      </div>
    </div>
  </div>
</template>
<style scoped lang='scss'>
@import '@/style/viriables.scss';

@mixin product($btn-bgColor) {
  font-size: 20px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: $btn-bgColor;
  line-height: 20px;
  color: $dark-bgColor;
  text-align: center;
  font-size: 20px;
}

.Product {
  width: 100%;
  height: 85%;
  margin: 1px auto;
  padding: 10px;
  // border: 1px solid red;
  display: flex;
  flex-wrap: nowrap;

  &-img {
    width: 20%;
    height: 100%;

    img {
      width: 80%;
      height: 80%;
    }

    .isMin {
      width: 100%;
      height: 100%;
    }
  }

  &-info {
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    &-detail {
      width: 100px;
      height: 100%;

      & .Product-title {
        font-size: 16px;
        font-weight: bold;
        white-space: nowrap;
        margin-bottom: 10px;
      }

      & .Product-price {
        &-now {
          color: red;
        }

        &-old {
          color: gray;
          text-decoration: line-through;
        }
      }
    }

    & .Product-btn {
      width: 30%;
      height: 100%;
      padding-top: 20px;
      display: flex;

      &-increase {
        @include product($btn-bgColor);
      }

      &-decrease {
        @include product($dark-bgColor);
        border: 1px solid $light-fontColor;
        box-sizing: border-box;
        color: $dark-fontColor;
      }

      &-count {
        font-size: 15px;
        line-height: 25px;
      }
    }
  }
}
</style>